<template>
  <div>
    <vxe-modal
      :title="$t('common.action.detail')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="60vw"
      height="480px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
    >
      <!-- 主体部分：详情展示 -->
      <el-descriptions
        ref="description"
        :column="1"
        :border="true"
        v-loading="loading"
        :element-loading-text="$t('common.message.info.loading', '正在加载...')"
        label-width="120px"
      >
        <!-- id -->
        <el-descriptions-item
          label-class-name="desc-label-width"
          :label="$t('common.field.id', '编号')"
          label-width="100"
        >
          {{ formData.id || '-' }}
        </el-descriptions-item>

        <!-- title -->
        <el-descriptions-item
          :label="$t('menu.dev.field.field.title', '字段标题')"
        >
          {{ formData.title || '-' }}
        </el-descriptions-item>

        <!-- field -->
        <el-descriptions-item :label="$t('menu.dev.field.field.field', '字段')">
          {{ formData.field || '-' }}
        </el-descriptions-item>

        <!-- key -->
        <el-descriptions-item
          :label="$t('menu.admin.lang.field.lang_key', '多语言键名')"
        >
          {{ formData.key || '-' }}
        </el-descriptions-item>

        <!-- config -->
        <el-descriptions-item
          :label="$t('menu.dev.field.field.config', '高级配置')"
        >
          <pre>{{ JSON.stringify(formData.config, null, 2) }}</pre>
        </el-descriptions-item>

        <!-- remark -->
        <el-descriptions-item :label="$t('common.field.remark', '备注')">
          {{ formData.remark || '-' }}
        </el-descriptions-item>

        <!-- sort -->
        <el-descriptions-item :label="$t('common.field.sort', '排序')">
          {{ formData.sort || '-' }}
        </el-descriptions-item>

        <!-- status -->
        <el-descriptions-item :label="$t('common.field.status', '状态')">
          <ra-dict-label v-model="formData.status" code="status_options" />
        </el-descriptions-item>

        <!-- 创建时间和更新时间（如果有的话） -->
        <el-descriptions-item
          :label="$t('common.field.create_time', '创建时间')"
          v-if="formData.createTime"
        >
          {{ formData.createTime }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('common.field.update_time', '更新时间')"
          v-if="formData.updateTime"
        >
          {{ formData.updateTime }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 空状态提示 -->
      <el-empty
        v-if="!loading && !formData.id"
        :description="$t('common.info.empty', '没有数据')"
        :image-size="100"
      />
    </vxe-modal>
  </div>
</template>

<script setup>
// 设置选项式 API 的内容
defineOptions({
  // 组件名称
  name: 'NoticeDetail',
  // 阻止透传非 props 属性
  inheritAttrs: false,
});

import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import FieldAPI from '@/api/admin/dev/field';

// 获取国际化函数
const { t } = useI18n();
// 是否显示载入效果
const loading = ref(false);
// 是否显示
const show = ref(false);
// 表单数据
const formData = reactive({
  // 表格数据
  id: null,
  // menu_id: 1,
  title: null,
  field: null,
  // build_in: 1,
  // config: {},
  remark: null,
  sort: null,
  status: null,
  // 配置数据
  config: {
    type: null,
    create_field: null, // create,relation,disable
    field_belong: null, // create_field = relation
    grid_visible: null, // left,right,center,hide,disabled
    form_post: null, // 1:post 0:not post

    field_type: null, // ajax select  type not_in hidden
    field_length: null, // type not_in hidden && type in ["varchar", "int", "smallint", "tinyint", "bigint", "decimal"]
    field_default: null, // 默认值 type not_in hidden
    field_constraint: [], // unique, not null type not_in hidden
    field_index: null, // index, unique type not_in hidden

    grid_render: null, // value, tag, custom grid_visible not_in ["hidden", "disabled"]
    grid_render_function: null, // grid_visible not_in ["hidden", "disabled"] && grid_render == custom
    grid_search: null, // disable,like, equal, between, in, >=,>,<=,<,LIKE_LEFT,LIKE_RIGHT grid_visible not_in ["hidden", "disabled"]
    grid_width: null, // 宽度 grid_visible not_in ["hidden", "disabled"]
    grid_token_render: null, // id,username,nickname,realname
    grid_sortable: null, // 允许排序 1,0 grid_visible not_in ["hidden", "disabled"]
    grid_filterable: null, // 允许筛选 1,0 grid_visible not_in ["hidden", "disabled"]
    grid_editable: null, // 允许编辑 1,0 grid_visible not_in ["hidden", "disabled"]

    item_multiple: null, // 多选2单选1 form_post = 1 && type == select
    item_options: null, // select checkbox radio  form_post = 1 && type in [select checkbox radio ]
    item_map: null, // baidumap,qqmap,amap form_post = 1 && type == location_select
    item_editor: null, // wangeditor, tinymce, markdown form_post = 1 && type == rich_text_editor
    item_image_upload: null, // ra-upload-input-single,ra-upload-card-single, ra-upload-list-single,ra-upload-card-multiple,ra-upload-list-multiple form_post = 1 && type == image_upload
    item_file_upload: null, // ra-upload-list-single,ra-upload-list-multiple form_post = 1 && type == file_upload
    item_rows: null, // 文本域行数 form_post = 1 && type == textarea
    item_random_length: null, // 随机数长度 form_post = 1 && type == random
    item_sn_format: null, // 订单格式 form_post = 1 && type == order_sn
    item_date_format: null, // 日期格式  form_post = 1 && type == date_time
    item_menu: null, // 列表选择器

    item_required: null, // 是否必填  form_post = 1
    item_default: null, // 默认值  form_post = 1
    item_placeholder: null, // 提示语  form_post = 1
    item_tooltip: null, // 提示语  form_post = 1
    item_when: null, // 显示条件  form_post = 1
    item_validate: null, // 验证规则 none:无验证,regular:正则验证,function:自定义函数 form_post = 1 && type in ["input", "textarea", "password"]
    item_regular_type: null, // 正则类型 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "regular"
    item_regular_content: null, // 正则内容 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "regular"
    item_function_name: null, // 函数名称 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "function"
    item_function_content: null, // 函数内容 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "function"

    extend_config: '', // 扩展配置
  },
});

// 初始化表单数据
const initFormData = () => {
  Object.assign(formData, {
    // 表格数据
    id: null,
    // menu_id: 1,
    title: null,
    field: null,
    // build_in: 1,
    // config: {},
    remark: null,
    sort: null,
    status: null,
    // 配置数据
    config: {
      type: null,
      create_field: null, // create,relation,disable
      field_belong: null, // create_field = relation
      grid_visible: null, // left,right,center,hide,disabled
      form_post: null, // 1:post 0:not post

      field_type: null, // ajax select  type not_in hidden
      field_length: null, // type not_in hidden && type in ["varchar", "int", "smallint", "tinyint", "bigint", "decimal"]
      field_default: null, // 默认值 type not_in hidden
      field_constraint: [], // unique, not null type not_in hidden
      field_index: null, // index, unique type not_in hidden

      grid_render: null, // value, tag, custom grid_visible not_in ["hidden", "disabled"]
      grid_render_function: null, // grid_visible not_in ["hidden", "disabled"] && grid_render == custom
      grid_search: null, // disable,like, equal, between, in, >=,>,<=,<,LIKE_LEFT,LIKE_RIGHT grid_visible not_in ["hidden", "disabled"]
      grid_width: null, // 宽度 grid_visible not_in ["hidden", "disabled"]
      grid_token_render: null, // id,username,nickname,realname
      grid_sortable: null, // 允许排序 1,0 grid_visible not_in ["hidden", "disabled"]
      grid_filterable: null, // 允许筛选 1,0 grid_visible not_in ["hidden", "disabled"]
      grid_editable: null, // 允许编辑 1,0 grid_visible not_in ["hidden", "disabled"]

      item_multiple: null, // 多选2单选1 form_post = 1 && type == select
      item_options: null, // select checkbox radio  form_post = 1 && type in [select checkbox radio ]
      item_map: null, // baidumap,qqmap,amap form_post = 1 && type == location_select
      item_editor: null, // wangeditor, tinymce, markdown form_post = 1 && type == rich_text_editor
      item_image_upload: null, // ra-upload-input-single,ra-upload-card-single, ra-upload-list-single,ra-upload-card-multiple,ra-upload-list-multiple form_post = 1 && type == image_upload
      item_file_upload: null, // ra-upload-list-single,ra-upload-list-multiple form_post = 1 && type == file_upload
      item_rows: null, // 文本域行数 form_post = 1 && type == textarea
      item_random_length: null, // 随机数长度 form_post = 1 && type == random
      item_sn_format: null, // 订单格式 form_post = 1 && type == order_sn
      item_date_format: null, // 日期格式  form_post = 1 && type == date_time
      item_menu: null, // 列表选择器

      item_required: null, // 是否必填  form_post = 1
      item_default: null, // 默认值  form_post = 1
      item_placeholder: null, // 提示语  form_post = 1
      item_tooltip: null, // 提示语  form_post = 1
      item_when: null, // 显示条件  form_post = 1
      item_validate: null, // 验证规则 none:无验证,regular:正则验证,function:自定义函数 form_post = 1 && type in ["input", "textarea", "password"]
      item_regular_type: null, // 正则类型 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "regular"
      item_regular_content: null, // 正则内容 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "regular"
      item_function_name: null, // 函数名称 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "function"
      item_function_content: null, // 函数内容 form_post = 1 && type in ["input", "textarea", "password"] && item_validate == "function"

      extend_config: '', // 扩展配置
    },
  });
};

// 加载详情数据
const loadDetailData = async (id) => {
  if (!id) {
    console.warn('ID不能为空');
    return;
  }

  try {
    loading.value = true;
    const params = { id };
    const { data } = await FieldAPI.detail(params);

    if (data) {
      Object.assign(formData, data);
    } else {
      ElMessage.warning($t('common.info.empty', '没有数据'));
      initFormData();
    }
  } catch (error) {
    console.error('Error loading detail data:', error);
    ElMessage.error($t('common.message.info.load_failed', '加载失败！'));
    initFormData();
  } finally {
    loading.value = false;
  }
};

/**
 * 暴露方法
 */
defineExpose({
  show(id) {
    // console.log('显示详情对话框，ID:', id);

    // 先显示模态框
    show.value = true;

    // 初始化数据
    initFormData();

    // 加载详情数据
    if (id) {
      loadDetailData(id);
    } else {
      console.warn($t('common.message.info.no_selected', '没有选择记录'));
      ElMessage.warning($t('common.message.info.no_selected', '没有选择记录'));
    }
  },
});

// 监听show变化，关闭时清理数据
watch(show, (newVal) => {
  if (!newVal) {
    // 模态框关闭时清理数据
    nextTick(() => {
      initFormData();
    });
  }
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
